<template>
  <a-sub-menu
    :key="menuInfo.key"
    v-bind="$props"
    v-on="$listeners"
  >
    <span slot="title">
      <a-icon type="mail" /><span>{{ menuInfo.title }}</span>
    </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item
        v-if="!item.children"
        :key="item.key"
      >
        <a-icon type="pie-chart" />
        <span>{{ item.title }}</span>
      </a-menu-item>
      <sub-menu
        v-else
        :key="item.key"
        :menu-info="item"
      />
    </template>
  </a-sub-menu>
</template>
<script>
import { Menu } from 'ant-design-vue';
export default {
  name: 'SubMenu',
  // must add isSubMenu: true
  isSubMenu: true, 
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: { 
      type: Object,
      default: ()=>({}),
    },
  },
};
</script>
